<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div style="width:1px;height:600px;background:black;position:absolute;left:1000px;top:0px;"></div>
</body>

</body>

</html>
<script>
    //一.缓冲运动
    //1.通过定时器让一个物体运动起来。
    //2.设置缓冲速度，离目标点越远速度越大。(越来越小的速度)
    //3.封装缓冲运动 - 当前的运动只能改变left.
    // const box = document.querySelector('.box');
    // let timer = null; //定时器的返回值。
    // let speed = 0; //初始速度
    // box.onclick = function() {
    //     clearInterval(timer); //清除前面的定时器
    //     timer = setInterval(() => {
    //         //求速度：越来越小的速度
    //         speed = (700 - box.offsetLeft) / 10; //速度，如果速度是整数，向上取整，否则向下取整
    //         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    //         if (box.offsetLeft === 700) { //到了目标点，让运动停止。
    //             clearInterval(timer);
    //         } else { //没到目标点，继续运动
    //             box.style.left = box.offsetLeft + speed + 'px'; //不断获取当前值+5再赋值
    //         }
    //     }, 1000 / 60);
    // };


    //缓冲运动的封装。
    let timer = null; //定时器的返回值。
    let speed = 0; //初始速度
    function bufferMove(obj, target) { //obj:元素对象   target:目标
        clearInterval(timer); //清除前面的定时器
        timer = setInterval(() => {
            //求速度：越来越小的速度
            speed = (target - obj.offsetLeft) / 10; //速度，如果速度是整数，向上取整，否则向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (obj.offsetLeft === target) { //到了目标点，让运动停止。
                clearInterval(timer);
            } else { //没到目标点，继续运动
                obj.style.left = obj.offsetLeft + speed + 'px'; //不断获取当前值+5再赋值
            }
        }, 1000 / 60);
    };

    const box = document.querySelector('.box');
    box.onclick = function() {
        bufferMove(this, 1000);
    };
</script>